<template>
	<view class="content">
		<view class="address_List">
			<view class="address_item" v-for="(item ,index) in addressList" :key="index" @click="setAddress(item)">
				<view class="" v-if="item.status===2" style="height: 60upx;">
					
				</view>
				<span class="silk-ribbon" v-if="item.status==2">默认</span> 
				<view class="" style="display: flex;">
					<image src="/static/address.png" mode=""></image>
					<view class="text">
						<view class="">
							<text>{{item.name}} </text><text>{{item.tel}}</text>
						</view>
						<view class="">
							{{item.add_a+item.add_b+item.add_s}}
						</view>
					</view>
					<u-icon name="edit-pen-fill" size="34" @click.native.stop="nav(item)"></u-icon>
				</view>
				
			</view>
		</view>
		<view class="" v-if="!addressList.length">
			<image src="../../../static/null.png" mode="" class="null"></image>
			<view style="text-align: center;color: #999999;font-size: 32upx;">
				一个地址也没有
			</view>
		</view>


		<view class="addAddress" @click="nav(0)">
			+添加收货地址
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList: []
			}
		},
		onShow() {
			this.upAddressData()
		},
		methods: {
			upAddressData() {
				this.$myRuquest('home/user/add_list').then(res => {
					this.addressList = res.data
				})
			},
			nav(item) {
				uni.navigateTo({
					url: './setAddress?item=' + JSON.stringify(item)
				})
			},
			setAddress(item){
				console.log('?????=====')
				uni.setStorageSync('defaultAddress', item);
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f5f5f5;
		padding: 20upx;
		min-height: 100vh;

		.address_List {

			margin-bottom: 200upx;
			.address_item {
				// display: flex;
				background-color: #FFFFFF;
				padding: 34upx 24upx;
				border-radius: 12upx;
				// height: 200upx;
				align-items: center;
				margin-bottom: 20upx;		
				position: relative;

				.silk-ribbon {
					color: #FFFFFF;
					display: inline-block;
					position: absolute;
					width: 90upx;
					height: 50upx;
					line-height: 50upx;
					padding-left: 15upx;
					background: $theme-color;
					left: -8upx;
					top: 20upx
		}	

				.silk-ribbon:before,
				.silk-ribbon:after {
					content: "";
					position: absolute;
					
				}

				.silk-ribbon:before {
					height: 0;
					width: 0;
					border-bottom: 8upx solid black;
					border-left: 8upx solid transparent;
					top: -8upx;
					left: 0;
					
				}

				.silk-ribbon:after {
					height: 0;
					width: 0;
					border-top: 25upx solid transparent;
					border-bottom: 25upx solid transparent;
					border-left: 15upx solid $theme-color;
					right: -15upx;
					
				}

				// margin:0 20upx;
				image {
					width: 60upx;
					height: 60upx;
					margin: auto;
					margin-right: 20upx;
				}

				.text {
					flex: 1;
					display: flex;
					flex-direction: column;
					font-size: 28upx;
					font-weight: 700;
					view:nth-child(1) {
						color: #999999;
						text:nth-child(1) {
							
							color: #333333;
							
							margin-right: 10upx;
						}
					}

					view:nth-child(2) {
						flex: 1;
						margin-top: 20upx;
					}
				}
			}

		}

		.null {
			width: 420upx;
			height: 384upx;
			margin: 20upx auto;
			display: block;
		}

		.addAddress {
			margin: 0 40upx;
			margin-top: 20upx;
			width: calc(100% - 80upx);
			height: 90upx;
			line-height: 90upx;
			border-radius: 45upx;
			// background-image: linear-gradient(to left, #63DBF2, #2BB9D4);
			background: #FED194;
			text-align: center;
			color: #AC7D3D;
			font-size: 32upx;
		}
	}
</style>
